<template>
	<view class="integral-record">
		<u-sticky>
			<view class="shouru-header">
				<view class="header-title">{{$t('common.myPoints')}}</view>
				<view class="header-num">{{user.integral}}</view>
			</view>
		</u-sticky>
		<view class="listBox">
			<view class="listItem" v-for="item in recordList">
				<view class="flexStyle">
					<span>{{item.explain}}</span>
					<span
						:class="item.accessType =='in'?'redText':'greenText' ">{{item.accessType =='in' ?'+':'-' }}{{item.amount}}</span>
				</view>
				<view class="timeStyle">{{item.createTime}}</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getBalanceInfo
	} from "@/api/system/user.js"

	import {
		findRecordList
	} from "@/api/system/record.js"

	export default {
		data() {
			return {
				user: {},
				recordList: [],
				isBottom: false,
				page: 0,
				pageSize: 10,
			};
		},
		onLoad: function() {

			this.getBalanceInfoFun();
			this.findRecordListFun('init');
		},
		onReachBottom: function() {
			//是否到底部，如果到了底部就不用查询了
			if (!this.isBottom) {
				this.findRecordListFun();
			}
		},
		methods: {

			getBalanceInfoFun() {
				getBalanceInfo().then(rsp => {
					if (rsp.code == 200) {
						this.user = rsp.data;
					}
				});
			},
			findRecordListFun(isInit) {
				findRecordList('3', {
					'pageNum': ++this.page,
					'pageSize': this.pageSize,
				}).then(rsp => {
					if (rsp.code == 200) {
						this.recordList = this.recordList.concat(rsp.rows);
						var currentNum = this.page * this.pageSize;
						console.log("currentNum" + currentNum)
						if (currentNum >= rsp.total) {
							//全部
							if ("init" != isInit) {
								uni.showToast({
									title: this.$t('common.reachedBottom'),
									icon: 'none'
								})
							}
							this.isBottom = true;
						}
					}
				});
			},

		},
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;
		color: $uni-color-font;
	}

	.integral-record {
		padding: 10px 12px;

		.shouru-header {
			padding: 16px 0 0 20px;
			height: 100px;
			background-color: $uni-color-primary;
			color: $uni-color-bg;
			border-radius: 10px;

			.header-title {
				font-size: 14px;
				font-weight: 500;
			}

			.header-num {
				margin-top: 16px;
				line-height: 30px;
				font-size: 22px;
				font-weight: 600;
			}
		}

		.listBox {
			margin-top: 10px;

			.listItem {
				background: $uni-color-box;
				box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .12);
				border-radius: 10px;
				margin-bottom: 10px;
				padding: 12px 16px;
				font-size: 14px;
				font-weight: 400;

				.flexStyle {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.redText {
						color: #e55e3c;
					}

					.greenText {
						color: #42b337;
					}
				}

				.timeStyle {
					display: inline-block;
					padding-top: 8px;
					font-weight: 400;
					color: grey;
				}
			}
		}
	}
</style>